<template>
	<view>
			<u-navbar left-icon-color="#fff" auto-back bg-color="transparent" ></u-navbar>
		<u-swiper :list="info.banner_image" radius="0" height="750rpx" indicatorStyle="right: 20px"
			@click="showPreview" @change="changeSw" :circular="true">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ banner_count }}</text>
			</view>
		</u-swiper>
		<view style="padding: 20rpx 30rpx;">
			<view class="u-bg-fff u-r-20" style="padding: 32rpx 20rpx;">
				<view class="u-f-28 u-bold">{{info.name}}</view>
				<view class="u-flex u-m-t-10 u-flex-between" style="color: #EA4D44;align-items: baseline;">
					<view class="u-flex " style="align-items: baseline;">
						<block v-if="info.score > 0">
							<view class="u-f-46 u-bold">{{info.score}}</view>
							<view class="u-f-24">积分</view>
							<view class="u-f-24">+</view>
						</block>
						
						<view class="u-f-46 u-bold">{{info.selling_price}}</view>
						<view class="u-f-24">元</view>
					</view>
					<view class="u-f-22" style="color: #646464;">
						原价￥{{info.original_price}}
					</view>
				</view>
			</view>
					<u-gap height="20rpx"></u-gap>
					<view class="u-bg-fff u-r-20" style="padding: 32rpx 20rpx;">
						<view class="u-f-32 u-bold">商品描述</view>
						<u-gap height="20rpx"></u-gap>
						<u-parse :content="info.content"></u-parse>
						<!-- <u-gap height="20rpx"></u-gap>
						<view class="u-f-32 u-bold">换领时间</view>
						<u-gap height="20rpx"></u-gap> -->
					</view>
		</view>
			<u-gap height="150rpx"></u-gap>
			
			<view style="padding: 10rpx 30rpx;position: fixed;bottom: 0;width: 100%;background-color: #fff;" class="u-flex-y-center u-flex-between">
				
				<block v-if="is_score==0">
				<!-- 	<view class="appBtn1" @click="show=true">
						<image src="../../static/Rectangle_39.png" style="width: 335rpx;height: 88rpx;position: absolute;"></image>
						加入购物车
					</view> -->
					<view class="appBtn2" @click="send(1)" style="margin: 0 20rpx;">
						<image src="../../static/Rectangle_27.png" style="width: 100%;height: 88rpx;position: absolute;z-index: -1;right:0;"></image>
					
						立即購買
					</view>
				</block>
				<block v-if="is_score==1">
					<view class="appBtn" @click="send(1)">
						<!-- <image src="../../static/Rectangle_39.png" style="width: 335rpx;height: 88rpx;position: absolute;"></image> -->
				立即兑换
					</view>
				</block>
			</view>
			
			<u-popup :show="show" round="30rpx" closeable @close="show=false">
				<view class="u-p-30 u-p-r">
					<view class="u-bg-fff u-r-16 u-flex-y-center">
						<image :src="info.image" style="width: 226rpx;height: 226rpx;border-radius: 16rpx;">
						</image>
						<view class="u-m-l-20 u-flex-1">
							<view style="color: #F10C0C;">
									<view class="u-flex " style="align-items: baseline;">
										<block v-if="info.score > 0">
											<view class="u-f-46 u-bold">{{info.score}}</view>
											<view class="u-f-24">积分</view>
											<view class="u-f-24">+</view>
										</block>
										
										<view class="u-f-46 u-bold">{{info.price}}</view>
										<view class="u-f-24">元</view>
									</view>
									
			
								<text class="u-m-l-10 u-f-26" style="color: #999999;text-decoration-line: line-through;">
									{{info.old_price}}元</text>
							</view>
					
							
							<u-gap height="15rpx"></u-gap>
							<view class="u-f-26 u-m-t-6">
								<text>
									库存：{{info.stock}}
								</text>
								
							</view>
						</view>
					</view>
					<u-gap height="30rpx"></u-gap>
					<view class="u-flex-y-center u-flex-between">
						<view class="u-f-28">份数</view>
						<view class="u-flex-y-center">
							<u-number-box v-model="number" :max="info.stock" min="1"
								@change="getCart"></u-number-box>
							
						</view>
					</view>
					<u-gap height="80rpx"></u-gap>
					<view style="padding: 10rpx 30rpx;padding-left: 0; position: fixed;bottom: 0;width: 100%;background-color: #fff;" class="u-flex-y-center ">
						<view class="appBtn1" @click="send(0)">
							<image src="../../static/Rectangle_39.png" style="width: 100%;height: 88rpx;position: absolute;"></image>
							加入购物车
						</view>
						<view class="appBtn2" @click="send(1)" style="margin-left: 10rpx;">
							<image src="../../static/Rectangle_27.png" style="width: 100%;height: 88rpx;position: absolute;z-index: -1;"></image>
							立即購買
						</view>
					</view>
				</view>
			</u-popup>
	</view>
</template>


<script>

	export default {
		
		data() {
			return {
				info: {},
				id:0,
				currentNum: 0,
				banner_count: 0,
				show:false,
				number:1,
				is_score:0,
				
			}
		},
		onLoad(e) {
			if(e.is_score){
				this.is_score=e.is_score
			}
				this.id = e.id
				this.getInfo()
		},
		
		methods: {
			changeSw(e) {
				this.currentNum = e.current
				// console.log(e)
			},
			showPreview(e) {
				console.log(e)
				uni.previewImage({
					urls: this.info.banner_image,
					current: this.info.banner_image[e]
				})
			},
			async getInfo() {
				let res = await uni.$u.http.post('virtual_equipments/getDetail',{id:this.id});
				this.info = res
				res.banner_image = res.banner_image.split(',')
				this.banner_count = res.banner_image.length
			},
			
			async send(e) {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						content: "请先登录",
						title: "提示",
						confirmText: "去登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							} else {
				
							}
						}
					})
					return
				}
			
				if (this.info.stock == 0) {
					return this.$u.toast('库存不足');
				}
				uni.navigateTo({
					url: '/pages/order/zbOrderCreated?shop_id=' + this.id  + '&number=' + this.number+ '&type=1'+'&goods='+JSON.stringify(this.info)
				})
			},
			addCar() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						content: "请先登录",
						title: "提示",
						confirmText: "去登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							} else {
			
							}
						}
					})
					return
				}
				this.show = true
			
			},
		
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8FA;
	}
	.indicator-num {
		padding: 2px 0;
		width: 108rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		@include flex;
		justify-content: center;
		align-items: center;
	
		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	.appBtn1 {
		flex: 1;
		height: 88rpx;
		// background: linear-gradient( 130deg, #F69792 0%, #EA4D44 100%);
		// border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #EA4D44;
		font-size: 28rpx;
	}
	.appBtn2{
		flex: 1;
		height: 88rpx;
		// background: linear-gradient( 130deg, #F69792 0%, #EA4D44 100%);
		// border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		position: relative;

	}
</style>